<template>
  <section class="echart" ref="echart"></section>
</template>

<script>
import echarts from 'echarts'
import { mapState } from 'vuex'
export default {
  name: 'Echart',
  props: {
    chartData: {
      type: Object,
      default() {
        // 这样写的目的是如果有第二个数据传进来，为了避免被污染，用return返回
        return {
          xData: [],
          series: []
        }
      }
    },
    isAxisChart: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption
    },
    ...mapState({
      isCollapse: state => state.tab.isCollapse
    })
  },
  data() {
    return {
      echart: null,
      // 有坐标抽
      axisOption: {
        // 直角坐标系内绘图网格,调整图表的位置
        grid: {
          left: '15%'
        },
        // 悬浮提示
        tooltip: {
          trigger: 'axis'
        },
        // 图标上方的图例
        legend: {
          textStyle: {
            color: '#333'
          }
        },
        //X轴配置
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            // X坐标轴线的颜色
            lineStyle: {
              color: '#17b3a3'
            }
          },
          axisLabel: {
            // X坐标轴下的字体颜色
            color: '#333'
          }
        },
        // Y轴配置
        yAxis: {
          type: 'value',
          axisLine: {
            //Y坐标轴线的颜色
            lineStyle: {
              color: '#17b3a3'
            }
          }
        },
        // 调色盘颜色列表,如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
        color: [
          '#2ec7c9',
          '#b6a2de',
          '#5ab1ef',
          '#ffb980',
          '#d87a80',
          '#8d98b3',
          '#e5cf0d',
          '#97b552',
          '#95706d',
          '#dc69aa',
          '#07a2a4',
          '#9a7fd1',
          '#588dd5',
          '#f5994e',
          '#c05050',
          '#59678c',
          '#c9ab00',
          '#7eb00a',
          '#6f5553',
          '#c14089'
        ],
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: []
      },
      // 没有坐标轴
      normalOption: {
        // 上方的标题
        // title: {
        //   text: '天气情况统计',
        //   subtext: '虚构数据',
        //   left: 'center'
        // },
        // 上方的图例
        legend: {
          orient: 'vertical',
          top: 30,
          right: 10,
          textStyle: {
            color: '#333'
          }
        },
        series: [],
        color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
        // 悬浮提示
        tooltip: {
          trigger: 'item'
        }
      }
    }
  },
  watch: {
    //监听的对象
    chartData: {
      // 深度监听
      handler() {
        this.initChart()
      },
      deep: true //深度监听设置为 true
    },
    isCollapse() {
      // 点击按钮动画效果，所以要延迟触发
      setTimeout(() => {
        this.resizeEchart()
      }, 300)
    }
  },
  methods: {
    initChart() {
      this.initChartData() // 初始化图标之前先加载数据
      //判断并挂在echarts
      if (this.echart) {
        this.echart.setOption(this.options)
      } else {
        // echart不存在则需要初始化
        this.echart = echarts.init(this.$refs.echart)
        this.echart.setOption(this.options)
      }
    },
    initChartData() {
      // 获取数据
      if (this.isAxisChart) {
        //有坐标轴的图表数据
        this.axisOption.xAxis.data = this.chartData.xData
        this.axisOption.series = this.chartData.series
      } else {
        //没有坐标轴的图表数据
        this.normalOption.series = this.chartData.series
      }
    },
    resizeEchart() {
      // 判断echart存在不，存在则触发自适应方法
      this.echart ? this.echart.resize() : ''
    }
  },
  mounted() {
    // 浏览器监听resize方法，并调用
    window.addEventListener('resize', this.resizeEchart)
  },
  destroyed() {
    // 销毁vue组件
    // 当用户离开页面的时候便会销毁监听事件。避免内存泄漏
    window.removeEventListener('resze', this.resizeEchart)
  }
}
</script>

<style lang="stylus" scoped>
.echart
  height: 100%
</style>
